<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>WiPAS File Manage</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/css/base.css">
    {% block header %}
    {% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg">
    <div class="container-fluid">
        <a class="navbar-brand d-flex align-items-center" href="/">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                 class="bi bi-file-bar-graph" viewBox="0 0 16 16">
                <path d="M4.5 12a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-1zm3 0a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-1zm3 0a.5.5 0 0 1-.5-.5v-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-.5.5h-1z"/>
                <path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/>
            </svg>
            WiPAS File Manage System
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        {# home page nav 可选项目 #}
        {% if session.get("user_info") %}
        <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <div class="buttons">
                        <a class="nav-link" href="/home">
                            <i class="bi bi-house-door-fill"></i>Home
                        </a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/project">
                        <i class="bi bi-sort-down-alt"></i>Project
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/team">
                        <i class="bi bi-diagram-3-fill"></i>Team
                    </a>
                </li>
                {% if session.get("user_info").get("role")<=1 %}
                    <li class="nav-item">
                        <a class="nav-link" href="/upload">
                            <i class="bi bi-cloud-arrow-up-fill"></i>Upload
                        </a>
                    </li>
                {% if session.get("user_info").get("role")== 0 %}
                    <li class="nav-item">
                        <a class="nav-link" href="/staff">
                            <i class="bi bi-person-lines-fill"></i>Staff
                        </a>
                    </li>
                {% endif %}
                {% endif %}
            </ul>
            {# 用户名和登出 #}
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="">
                        <i class="bi bi-person-circle"></i>{{session['user_info'].get('username')}}
                    </a>
                </li>
                <li>
                    <a class="nav-link" href="/login">
                        <i class="bi bi-box-arrow-in-right"></i>Logout
                    </a>
                </li>
            </ul>
        </div>
        {% endif %}
    </div>
</nav>
{% block content %}
{% endblock %}

{% block footer %}
{% endblock %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>